<template>
  <div id="screen">
    <!-- 筛选 -->
    <van-dropdown-menu active-color="#1779ff">
      <van-dropdown-item title="筛选" ref="ref1">
        <!-- 抖音销量 -->
        <!-- <van-cell title="点赞数" class="screen">
          <template>
            <button
              class="num"
              :class="[item == likes_01 ? 'active' : '']"
              v-for="item in options"
              :key="item"
              @click="likes(item)"
            >
              {{ item }}
            </button>
          </template>
        </van-cell> -->
        <!-- 粉丝榜 -->
        <van-cell title="粉丝数" class="screen">
          <template>
            <button
              class="num"
              :class="[item == fans_01 ? 'active' : '']"
              v-for="item in options_01"
              :key="item"
              @click="fans(item)"
            >
              {{ item }}
            </button>
             <van-checkbox v-model="checked" shape="square">是否带货</van-checkbox>
          </template>
        </van-cell>
        <!-- <van-cell title="作品数" class="screen">
          <template>
            <button
              class="num"
              :class="[item == works_01 ? 'active' : '']"
              @click="works(item)"
              v-for="item in options_02"
              :key="item"
            >
              {{ item }}
            </button>
            <van-checkbox v-model="checked" shape="square">是否带货</van-checkbox>
          </template>
        </van-cell> -->
        <!-- 排行榜 -->
        <div style="padding: 5px 16px">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ["不限", "10万-50万", "50万-100万", "100万-200万", ">200万"],
      likes_01: "不限",
      options_01: [
        "不限",
        "10万-50万",
        "50万-100万",
        "100万-500万",
        "500万-1000万",
        ">1000万",
      ],
      fans_01: "不限",
      options_02: ["不限", "<10", "10-50", "50-100", ">100"],
      works_01: "不限",
      checked: false,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    //作品
    works(i) {
      this.works_01 = i;
    },
    likes(i) {
      this.likes_01 = i;
    },
    fans(i) {
      this.fans_01 = i;
  
    },
    //关闭弹窗(筛选中的确认按钮)
    onConfirm() {
      this.$emit("onConfirm", this.fans_01,this.checked //是否带货
      );
      this.$refs.ref1.toggle();
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
.commerce {
  font-size: 0.373333rem;
  vertical-align: top;
  color: #222222;
  margin-top: 0.4rem;
}
</style>
